<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <title>Title</title>
</head>
<body>
<span id="sp"><font color="red">帅帅帅!</font></span>

        <p>窗前明月光</p>
        <p>疑似地上霜</p>
        <p>举头望明月</p>
        <p>低头思故乡</p>


姓名: <input type="text" name="username" value="张三"/> <br>
<button type="button" id="show1">显示</button>
<button type="button" id="hide1">隐藏</button><br>
<button type="button" id="delete">删除</button><br>


<a href="http://www.baidu.com">跳转到百度</a>

<script type="text/javascript">
    $(function(){
        //alert("这是jquery的hello word!");
        //通过id获取元素
        //alert($("#sp").text());
        //标签元素选择器
        //alert($("span").text());

        //隐藏所有p标签的元素
        //$("p").hide();

        //当鼠标单击button按钮的时候触发这个方法
        // $("#show1").click(function(){
        //     //显示所有p标签元素
        //     $("p").show();
        // });
        //
        // //当鼠标单击hide1这个元素的时候, 触发这个方法
        // $("#hide1").click(function(){
        //     //隐藏p标签
        //     $("p").hide();
        // });

        //获取表单元素的value值
        //alert($("[name='username']").val());

        //获取p标签中的文本内容
        //alert($("p").text());

        //获取p标签的html整个元素
        //$("#sp").html("<font color='#7fff00'>中国</font>");

        //更改a标签中href属性的内容
        $("a").attr("href", "http://www.jd.com");
        $("a").text("跳转到京东");

        //姓名输入框的内容改变事件
        $("[name='username']").change(function(){
            alert("姓名输入框的内容改变了!");
        });

        //显示
        $("#show1").click(function(){
            //淡入, 慢慢的显示出来
            $("p").fadeIn("slow");
        });

        //隐藏
        $("#hide1").click(function(){
            //淡出, 慢慢的隐藏
            $("p").fadeOut("slow");
        });

        //点击删除按钮, 删除span元素
        $("#delete").click(function(){
            $("#sp").remove();
        });

    });

</script>
</body>
</html>